<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>下拉列表</title>
    <!-- https://fontawesome.com/v5/search?s=solid%2Cbrands -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"/>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="menu-bar">
        <h1 class="logo">B站<span>大学.</span></h1>
        <ul>
            <li><a href="#">首页</a></li>
            <li><a href="#">招生就业</a></li>
            <li><a href="#">学校概括 <i class="fas fa-caret-down"></i></a>
                <div class="dropdown-menu">
                    <ul> 
                        <li><a href="#">学校简介</a></li>
                        <li><a href="#">历史沿革</a></li>
                        <li><a href="#">人才培养 <i class="fas fa-caret-right"></i></a> 
                            <div class="dropdown-menu-1">
                                <ul>
                                    <li><a href="#">本科教育</a></li>
                                    <li><a href="#">研究生教育</a></li>
                                    <li><a href="#">MBA教育</a></li>
                                    <li><a href="#">国际教育</a></li>
                                </ul>
                            </div>
                        </li>
                        <li><a href="#">国防教育</a></li>
                    </ul>
                </div>
            </li>
            <li><a href="#">学术研究</a></li>
            <li><a href="#">院系设置</a></li>
        </ul>
    </div>
    <div class="hero">
        &nbsp;
      </div>
</body>
</html>